﻿@inject I18n I18n
@inject MasaBlazor MasaBlazor
@inject LocalStorage LocalStorage
@inject IJSRuntime JSRuntime

<MNavigationDrawer Value="Value"
                   ValueChanged="ValueChanged"
                   Fixed
                   Color="surface"
                   Right="!MasaBlazor.RTL"
                   Temporary
                   HideOverlay
                   Touchless
                   Width="349">
    <PrependContent>
        <MToolbar Class="m-bar--underline" Color="surface" Flat Height="96">
            <h3>
                @I18n.T("settings")
            </h3>
        </MToolbar>
    </PrependContent>
    <ChildContent>
        <MContainer>
            <div>
                <div class="font-weight-black ps-1 mb-2">@I18n.T("direction")</div>
                <MItemGroup Value="@MasaBlazor.RTL.ToString()" ActiveClass="primary">
                    <MRow>
                        <MCol Cols="6">
                            <MItem Value="@("False")">
                                <MButton Block Large Depressed Class="@($"justify-space-between {context.ActiveClass}")"
                                         OnClick="() => ToggleRTL(false)">
                                    LTR
                                    <MIcon Right>M21,18L17,14V17H5V19H17V22M9,10V15H11V4H13V15H15V4H17V2H9A4,4 0 0,0 5,6A4,4 0 0,0 9,10Z</MIcon>
                                </MButton>
                            </MItem>
                        </MCol>
                        <MCol Cols="6">
                            <MItem Value="@("True")">
                                <MButton Block Large Depressed Class="@($"justify-space-between {context.ActiveClass}")"
                                         OnClick="() => ToggleRTL(true)">
                                    RTL
                                    <MIcon Right>M8,17V14L4,18L8,22V19H20V17M10,10V15H12V4H14V15H16V4H18V2H10A4,4 0 0,0 6,6A4,4 0 0,0 10,10Z</MIcon>
                                </MButton>
                            </MItem>
                        </MCol>
                    </MRow>
                </MItemGroup>
            </div>
        </MContainer>
    </ChildContent>
</MNavigationDrawer>

@code {

    [Parameter]
    public bool? Value { get; set; }

    [Parameter]
    public EventCallback<bool?> ValueChanged { get; set; }

    private void ToggleRTL(bool rtl)
    {
        if (rtl == MasaBlazor.RTL)
        {
            return;
        }

        MasaBlazor.RTL = rtl;

        _ = LocalStorage.SetItemAsync("masablazor@rtl", rtl ? "rtl" : "ltr");
    }

}
